
<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue';
import { useRouteStore } from '@/stores/routeStore';
import { useRouter } from 'vue-router';
import { useInitData } from "@/stores/initStore";
import { Location, Menu, Document, PieChart, Setting, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';

const router = useRouter();
const initData = useInitData();
const currentRoute = ref(router.currentRoute.value.path);

// 路由图标映射
const routeIcons: Record<string, any> = {
  '/daily': Document,
  '/task': Menu,
  '/production_issues': PieChart,
  '/performance': Setting
};

// 获取路由对应的图标组件
const getRouteIcon = (path: string) => {
  return routeIcons[path] || Location;
};

const handleSelect = (key: string) => {
  // 处理子菜单的情况
  if (key.includes('-')) {
    const [parentIndex, childIndex] = key.split('-').map(Number);
    const parentRoute = filteredRoutes.value[parentIndex];
    if (parentRoute?.children && parentRoute.children[childIndex]) {
      router.push(parentRoute.children[childIndex].path);
    }
  } else {
    router.push(key);
  }
};

const handleOpenChange = (v: boolean) => {
  initData.setCollapse(v);
};

// 监听路由变化，更新当前激活项
onMounted(() => {
  router.beforeEach((to) => {
    currentRoute.value = to.path;
  });
});

// 从 Pinia store 获取路由数据
const { routes } = useRouteStore();
const filteredRoutes = computed(() => routes.filter((route) => route.path !== '/notFound' && route.path !== '/'));
</script>

<template>
    <div class="sidebar-container">
        <el-menu 
            :default-active="currentRoute" 
            class="sidebar-menu" 
            :background-color="'#001529'" 
            :text-color="'#fff'"
            :active-text-color="'#409eff'"
            :unique-opened="true"
            :collapse="initData.isCollapse"
            @select="handleSelect"
        >
            <template v-for="(route, index) in filteredRoutes" :key="route.path">
                <el-sub-menu 
                    v-if="route.children && route.children.length > 0" 
                    :index="index.toString()"
                    popper-append-to-body
                >
                    <template #title>
                        <el-icon :size="20">
                            <component :is="getRouteIcon(route.path)" />
                        </el-icon>
                        <span>{{ route.name }}</span>
                    </template>
                    <el-menu-item 
                        v-for="(child, childIndex) in route.children" 
                        :key="child.path"
                        :index="`${index}-${childIndex}`"
                    >
                        <span>{{ child.name }}</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item 
                    v-else 
                    :index="route.path"
                >
                    <el-icon :size="20">
                        <component :is="getRouteIcon(route.path)" />
                    </el-icon>
                    <span>{{ route.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
        
        <!-- 折叠/展开按钮 -->
        <div 
            class="collapse-btn" 
            @click="handleOpenChange(!initData.isCollapse)"
            :class="{ 'collapsed': initData.isCollapse }"
        >
            <el-icon :size="20">
                <ArrowLeft v-if="!initData.isCollapse" />
                <ArrowRight v-else />
            </el-icon>
        </div>
    </div>
</template>

<style scoped>
.sidebar-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #001529;
    position: relative;
}

.sidebar-menu {
    border-right: none;
    background: transparent;
    overflow-y: auto;
    flex: 1;
}

/* 菜单项样式优化 */
:deep(.el-menu-item) {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

:deep(.el-menu-item:hover) {
    background-color: rgba(255, 255, 255, 0.08);
}

:deep(.el-menu-item.is-active) {
    background-color: #1890ff;
    color: #fff;
}

:deep(.el-menu-item.is-active::before) {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: #fff;
    border-radius: 0 4px 4px 0;
}

/* 子菜单样式 */
:deep(.el-sub-menu .el-sub-menu__title) {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    transition: all 0.3s ease;
}

:deep(.el-sub-menu .el-sub-menu__title:hover) {
    background-color: rgba(255, 255, 255, 0.08);
}

/* 折叠/展开按钮 */
.collapse-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s ease;
    z-index: 10;
}

.collapse-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-50%) scale(1.1);
}

.collapse-btn.collapsed {
    left: 50%;
}

/* 滚动条样式 */
.sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
</style>
